<template>
	<a-layout>
		<a-layout-content style="background: #fff">
			<a-page-header>
				<template slot="extra">
					<a-tooltip v-has="'merchant.query'">
						<template slot="title">刷新页面</template>
						<a-button @click="fetch(searchParams)">
							<a-icon type="reload" />
						</a-button>
					</a-tooltip>
					<a-button
						v-has="'merchant.create'"
						type="primary"
						@click="itemEdit()"
					>
						<a-icon type="plus" />添加
					</a-button>
				</template>
				<template slot="title">批发商管理</template>
			</a-page-header>

			<div style="margin: 0 16px">
				<a-form-model layout="inline">
					<a-form-model-item>
						<a-select
							v-model="formInline.status"
							style="width: 120px"
							placeholder="请选择状态"
							allow-clear
							@change="queryForm"
						>
							<a-select-option :value="1">状态：有效</a-select-option>
							<a-select-option :value="0">状态：暂停</a-select-option>
						</a-select>
					</a-form-model-item>

					<a-form-model-item>
						<a-select
							allowClear
							v-model.trim="formInline.market_id"
							style="width: 140px"
							@change="handleMarketChange"
							placeholder="所属市场"
						>
							<a-select-option
								v-for="(item, index) in marketData"
								:key="index"
								:value="item.id"
							>
								{{ item.name }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
					<!--
              <a-form-model-item>
              <app-tree-select
                v-model="formInline.area_code_select"
                style="width: 220px; margin-left: 10px;"
                :code="$e.city"
                radio
                placeholder="请选择城市"
                @change="
                  (data) => {
                    formInline.area_code_right_like = undefined
                    if (!value) return
                    formInline.area_code_right_like = data.area_code
                    queryForm()
                  }
                "
          /> </a-form-model-item>-->
					<a-form-model-item>
						<a-input-search
							v-has="'merchant.query'"
							v-model="formInline.searchkey"
							placeholder="名称"
							style="width: 200px"
							allow-clear
							@search="queryForm"
						>
							<a-button
								:disabled="
									Object.values(formInline).every((item) => {
										return !item
									})
								"
								slot="enterButton"
								>查询</a-button
							>
						</a-input-search>

						<a-button
							v-has="'merchant.query'"
							:disabled="
								Object.values(formInline).every((item) => {
									return !item
								})
							"
							@click="clear"
							icon="delete"
							style="margin-left: 18px"
							>清空</a-button
						>
					</a-form-model-item>
				</a-form-model>
			</div>

			<div style="margin: 10px 16px 0 16px">
				<itemTable
					:columns="columns"
					:data="data"
					:pagination="pagination"
					:loading="loading"
					@action="itemAction"
					@change="handleTableChange"
					:rowSelection="rowSelection"
					:scroll="{}"
				/>
			</div>
		</a-layout-content>

		<edit
			v-model="editVisible"
			:item="editItem"
			@change="fetch(searchParams)"
		/>
		<show v-model="showVisible" :data="editItem" />
	</a-layout>
</template>

<script>
	import merchant from "@/api/merchant"
	import salemarket from "@/api/salemarket"
	const rowSelection = {
		onChange: (selectedRowKeys, selectedRows) => {
			console.log(
				`selectedRowKeys: ${selectedRowKeys}`,
				"selectedRows: ",
				selectedRows
			)
		},
		onSelect: (record, selected, selectedRows) => {
			console.log(record, selected, selectedRows)
		},
		onSelectAll: (selected, selectedRows, changeRows) => {
			console.log(selected, selectedRows, changeRows)
		},
	}

	export default {
		components: {
			itemTable: () => import("./table"),
			edit: () => import("./edit"),
			show: () => import("./show"),
		},
		data() {
			return {
				editVisible: false,
				showVisible: false,
				editItem: undefined,
				marketData: [],
				//查询条件
				formInline: {
					market_id: undefined,
					status: undefined,
					area_code_right_like: undefined,
					area_code_select: undefined,
					searchkey: undefined,
				},

				//列表数据
				data: [],
				rowSelection,
				pagination: {
					current: 1,
					pageSize: 20,
					total: 0,
					totalPage: 0,
					showSizeChanger: true,
					// hideOnSinglePage: true,
					showTotal: (total) => `总 ${total} 条`,
				},
				loading: false,
				searchParams: undefined,
				columns: [
					{
						title: "商家编号",
						dataIndex: "id",
						key: "id",

						align: "center",

						scopedSlots: { customRender: "id" },
					},
					{
						title: "商户名称",
						ellipsis: true,
						key: "name",
						align: "center",
						scopedSlots: { customRender: "name" },
					},
					{
						title: "所属批发市场",
						ellipsis: true,
						key: "market_name",
						align: "center",
						scopedSlots: { customRender: "market_name" },
					},
					{
						title: "所属区域",
						key: "map_area",
						ellipsis: true,
						align: "center",
						scopedSlots: {
							customRender: "map_area",
						},
					},
					{
						title: "租户ID",
						dataIndex: "owner_id",
						key: "owner_id",

						align: "center",
						scopedSlots: { customRender: "owner_id" },
					},

					{
						title: "商家电话",
						dataIndex: "phone",
						key: "phone",
						align: "center",
						ellipsis: false,
					},

					{
						title: "创建时间",
						align: "center",

						scopedSlots: { customRender: "created_at" },
					},
					{
						title: "运营地址",
						key: "address",
						ellipsis: true,
						align: "center",
						scopedSlots: { customRender: "address" },
					},
					{
						title: "操作",
						dataIndex: "action",
						key: "action",
						align: "center",

						scopedSlots: { customRender: "action" },
					},
				],
			}
		},
		mounted() {
			this.$emit("menu", "/salemarket/list")
			this.queryForm()
			// 获取批发市场列表
			this.getMarketList()
		},
		methods: {
			async getMarketList(params = {}) {
				// this.resetFormFields()
				this.marketData = []

				await salemarket.query(params).then((response) => {
					console.log("市场列表数据", response)
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}

					if (response.data && response.data.length > 0) {
						this.marketData = response.data.map((item) => {
							return {
								id: item.id,
								name: item.name,
							}
						})
					}
				})
			},
			clear() {
				this.formInline = {
					market_id: undefined,
					status: undefined,
					area_code_right_like: undefined,
					area_code_select: undefined,
					searchkey: undefined,
				}
				this.queryForm()
			},
			// calcTableWidth(columns) {
			// 	let totalWidth = 0
			// 	for (let i = 0, len = columns.length; i < len; i++) {
			// 		if (columns[i].width) {
			// 			totalWidth += columns[i].width
			// 		} else {
			// 			totalWidth += 120
			// 		}
			// 	}
			// 	return totalWidth
			// },
			queryForm() {
				this.data = []
				this.pagination.current = 1
				this.handleTableChange(this.pagination, {}, {})
			},
			handleTableChange(pagination, filters, sorter) {
				let orderBy = ""
				if (
					sorter.field &&
					sorter.order &&
					sorter.field !== "" &&
					(sorter.order === "descend" || sorter.order === "ascend")
				) {
					let tmp = sorter.field.split(".")
					orderBy += tmp[tmp.length - 1]
					if (sorter.order === "descend") {
						orderBy += " desc"
					}
				}
				if (orderBy) {
					this.formInline["order_by"] = orderBy
				}

				this.fetch({
					...filters,
					...this.formInline,
					pageSize: pagination.pageSize,
					page: pagination.current,
				})
			},
			handleMarketChange(market_id) {
				this.formInline.market_id = market_id
				this.queryForm()
			},
			async fetch(params = {}) {
				this.data = []
				this.loading = true
				this.searchParams = params
				await merchant.query(params).then((response) => {
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}

					if (response.page) {
						this.pagination.current = response.page["page"]
						this.pagination.pageSize = response.page["pageSize"]
						this.pagination.total = response.page["totalSize"]
						this.pagination.totalPage = response.page["totalPage"]
					}

					if (response.data && response.data.length > 0) {
						this.data = response.data
					}

					return
				})
				this.loading = false
			},
			itemAction(type, item) {
				console.log(type, item)
				if (type == "edit") {
					this.itemEdit(item)
					return
				}
				this.editItem = item
				this.showVisible = true
			},
			itemEdit(item) {
				this.editItem = item
				this.editVisible = true
			},
		},
	}
</script>

<style lang="less" type="text/less" scoped></style>
